<template>
	<view class="menber-container">
		<view class="top">
			<!-- #ifdef MP-WEIXIN -->
			<u-navbar title="用户中心" :placeholder="true" :fixed="true" bgColor="transparent"
				:titleStyle="{fontSize: ' 36rpx', fontWeight: 'bold', color: fontColor}">
				<view slot="left"></view>
			</u-navbar>
			<!-- #endif -->

			<!-- <view class="bindtext" v-if="!bindmobile">
				<text class="bindtext1">为了您的账户安全，请绑定手机号</text>
				<view style="width: 140rpx;">
					<u-button size="mini" color="rgba(255, 255, 255, 0.9)" :plain="true" shape="circle" text="绑定手机号"
						customStyle="backgroundColor: transparent;font-size: 28rpx;" open-type="getPhoneNumber"
						@getphonenumber="getPhoneNumber"></u-button>
				</view>
			</view> -->
			<view class="admin_box" @click="routerHandle('/pages/mine/personal-info/index')">
				<view class="flex jc-between ai-center">
					<u-image :src="userData.avatar || '/static/images/user.png'" width="120rpx" height="120rpx"
						shape="circle" @click="getUsername()">
					</u-image>
					<view class="ml-20">
						<view style="width: 380rpx;" @click="getUsername()">
							<text
								class="font-36 font-color font-bold text-ellipsis">{{userData.nick_name || '匿名用户'}}</text>
						</view>
						<view class="font-24 font-color-2 mt-20">ID：{{ userData.user_id }}</view>
					</view>
				</view>
				<u-icon name='arrow-right' color="#999" siez="36rpx"></u-icon>
			</view>

			<!-- IOS -->
			<template v-if="isIOS">
				<template v-if="canPayIOS && !isDefaultChannel">
					<view class="member">
						<view class="flex ai-center" @click="routerHandle('/pages/mine/balance-detail/list')">
							<u-image src="/static/images/jindou.png" width="60rpx" height="60rpx"></u-image>
							<view class="ml-20">
								<template v-if="userData.is_vip">
									<view class="flex ai-center">
										<text class="member_number">尊贵VIP</text>
									</view>
								</template>
								<template v-else>
									<view class="flex ai-center">
										<text class="member_number">{{ balanceData.coin }}</text>
										<text class="member_text">金币</text>
									</view>
								</template>
								<view class="color-fff font-24">{{ balanceData.text }}</view>
							</view>
						</view>
						<view class="member_desc">
							<u-button text="充值" shape="circle" @click="showRechargeHandle()"></u-button>
						</view>
					</view>
				</template>
			</template>
			<!-- 安卓 -->
			<template v-else>
				<view class="member">
					<view class="flex ai-center" @click="routerHandle('/pages/mine/balance-detail/list')">
						<u-image src="/static/images/jindou.png" width="60rpx" height="60rpx"></u-image>
						<view class="ml-20">
							<template v-if="userData.is_vip">
								<view class="flex ai-center">
									<text class="member_number">尊贵VIP</text>
								</view>
							</template>
							<template v-else>
								<view class="flex ai-center">
									<text class="member_number">{{ balanceData.coin }}</text>
									<text class="member_text">金币</text>
								</view>
							</template>
							<view class="color-fff font-24">{{ balanceData.text }}</view>
						</view>
					</view>
					<view class="member_desc">
						<u-button text="充值" shape="circle" @click="showRechargeHandle()"></u-button>
					</view>
				</view>
			</template>

			<view class="mt-30">
				<u-gap height="20rpx" bgColor="#F4F6F6"></u-gap>
			</view>

		</view>

		<view style="flex: 1;overflow: scroll;">
			<scroll-view scroll-y="true" style="height: cacl(100% - 10rpx)">
				<view v-for="item in iconList" :key="item.name">
					<view class="cell-item" @click="handleIconClick(item)">
						<view class="flex ai-center">
							<u-image :src="item.icon" width="40rpx" height="40rpx"></u-image>
							<text class="font-28 font-color-2 ml-20">{{ item.name }}</text>
						</view>
						<u-icon name="arrow-right" :color="fontColor2" size="28rpx"></u-icon>

						<template v-if="item.url === 'SERVICE'">
							<button class="service-btn" open-type="im" :data-im-id="imId" @im="serviceSuccess"
								@error="serviceError"></button>
						</template>

					</view>
					<u-line color="#F4F6F6"></u-line>
				</view>

				<u-gap height="100rpx"></u-gap>


				<!-- <view class="bottom-btn" v-if="vk.vuex.get('$app.index_activity.xcx_kefu')">
					<u-button :text="vk.vuex.get('$app.index_activity.xcx_kefu_text')" openType="contact" shape="circle"
						customStyle="background-color: #FD773B; font-size: 28rpx; color: #fff; height: 76rpx; width: 80%;border: none">
					</u-button>
				</view> -->
			</scroll-view>
		</view>

		<!-- 充值弹出层 -->
		<RechargePopup :showPopup.sync="showPopup" @success="paySuccess"></RechargePopup>
	</view>
</template>

<script>
import colorMixins from '@/mixins/colorMixins.js'
import UsePanel from '@/components/use-panel/use-panel.vue'
import RechargePopup from '@/components/recharge-popup/recharge-popup.vue'
import { headerParams } from '@/config/headerParams.js'
import storage from '@/utils/storage.js'
import { CHANNEL_ID } from '@/store/mutation-types.js'
import {
  queryUserInfo,
  queryBalance
} from '../../api/user'
export default {
  mixins: [colorMixins],
  components: {
    UsePanel,
    RechargePopup
  },
  data() {
    return {
      showPopup: false,
      shouldBindmobile: true,
      shouldCustomerService: true,
      sessionKey: '',
      encryptedKey: '',
      userData: {
        user_code: '',
        nick_name: '',
      },
      balanceData: {},
      iconList: [{
        icon: '/static/images/mine-yhxy.png',
        name: '余额明细',
        url: '/pages/mine/balance-detail/list'
      }, {
        icon: '/static/images/mine-gkjl.png',
        name: '观看记录',
        url: '/pages/watching/more-list'
      }, {
        icon: '/static/images/mine-swhz.png',
        name: '商务合作',
        url: '/pages/mine/cooperate/index'
      }, {
        icon: '/static/images/mine-lxkf.png',
        name: '联系客服',
        url: 'SERVICE'
      }, {
        icon: '/static/images/mine-wytc.png',
        name: '我要吐槽',
        url: '/pages/mine/feedback/index'
      }, {
        icon: '/static/images/mine-yhxy.png',
        name: '用户协议',
        url: '/pages/mine/agreement/index'
      }],
      userNowChannelId: storage.get(CHANNEL_ID),

      imId: 'fdduanju', // 抖音客服，抖音号


    }
  },
  async onLoad() {
    const token = this.$store.state.token
    if (!token) {
      await this.getLoginCode()
    }
    await this.queryUserInfoFn()
    await this.queryBalanceFn()
  },
  onShow() {
    setTimeout(() => {
      this.queryUserInfoFn()
      this.queryBalanceFn()
    }, 300)
  },
  computed: {
    // 审核模式
    isAudit() {
      return this.$store.state.appConfig.is_audit == 1
    },
    isIOS() {
      return this.$store.state.systemInfo.osName == 'ios'
    },
    canPayIOS() {
      return this.$store.state.appConfig.is_ireg == 1
    },
    isDefaultChannel() {
      const nowChannelId = storage.get(CHANNEL_ID)
      const defaultChannelId = headerParams.pid
      return nowChannelId == defaultChannelId
    },
  },
  methods: {
    // 登录
    getLoginCode() {
      return new Promise(resolve => {
        // #ifdef MP-TOUTIAO
        uni.login({
          provider: 'toutiao',
          success: res => {
            const { code } = res
            // 在store/user.js执行登录请求
            this.$store.dispatch('Login', code).then(res => {
              // 获取小程序配置
              this.$store.dispatch('SetAppConfig')
              resolve(res)
            })
          }
        })
        // #endif
      })
    },

    // 查用户信息
    async queryUserInfoFn() {
      const data = await this.$store.dispatch('UserInfo')
      this.userData = data
    },

    // 查金币余额
    async queryBalanceFn() {
      const data = await queryBalance()
      data.coin = Math.ceil(data.coin)
      this.balanceData = data
    },

    showRechargeHandle() {
      this.showPopup = true
    },

    paySuccess() {
      uni.$u.toast('支付成功')
      this.queryUserInfoFn()
      this.queryBalanceFn()
    },

    handleIconClick(item) {
      const { url } = item
      if (!url) return false

      if (url === 'SERVICE') {
        return
      }

      uni.navigateTo({ url })
    },

    getUsername() {
      uni.navigateTo({ url: '/pages/Tabbar/my/setUserinfo/setUserinfo' })
    },

    serviceSuccess(e) {
      console.log('打开抖音客服，成功', e)
    },
    serviceError(e) {
      console.log('打开抖音客服，失败', e)

    }

  }
}
</script>

<style lang="scss" scoped>
	.menber-container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		overflow: hidden;
	}

	.top {
		position: relative;
	}


	.bindtext {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 32rpx;
		height: 64rpx;
		line-height: 64rpx;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.bindtext1 {
		color: rgba(255, 255, 255, 0.9);
		font-size: 26rpx;
	}


	.admin_box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 32rpx 30rpx;
	}

	.nickname {
		color: $font-color;
		font-size: 36rpx;
		margin: 0 12rpx 10rpx 0;
		letter-spacing: 2rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}


	.recharge /deep/ .u-button {
		font-size: 36rpx;
		color: #F3185D;
		background-color: #fff;
		padding: 10rpx 0;
		border-radius: 100rpx;
		border: none;
		width: 160rpx;
	}

	.member {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-image: linear-gradient(to right, $linear-gradient-r, $linear-gradient-l);
		border-radius: 16rpx;
		margin: 0 32rpx;
		padding: 32rpx;
	}

	.member image {
		width: 52rpx;
		height: 52rpx;
		margin-right: 16rpx;
	}

	.member_number {
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
	}

	.member_text {
		color: #fff;
		font-size: 24rpx;
	}

	.member_desc {
		width: 160rpx;

		/deep/ .u-button--info {
			background-color: #fff;
			color: $main-color;
			border: none;
			font-size: 24rpx !important;
			padding: 16rpx 0;
			height: auto;
		}
	}

	.cell-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 40rpx 30rpx;
		position: relative;

		.service-btn {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			opacity: 0;
		}
	}

	.bottom-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 56rpx 0 100rpx;
	}
</style>
